<html>
  <head>
    <title>Sciter, Image generators for CSS</title>
    <style>
      html { background: transparent; }
      
      div.test {
        background: url(in-memory:test) stretch;
        size:50%;
        margin:*;
        border:1px solid red;
      }
      
    </style>
    <script type="text/tiscript">

      var dynImage = null;

      function generate()
      {
        function painter(gfx) // generates 1000 random lines on graphics
        {            
          for(var n = 0; n < 1000; ++n) 
          {
            var x1 = rand(500);
            var x2 = rand(500);
            var y1 = rand(500);
            var y2 = rand(500);
            gfx.lineWidth(1 + rand(6)); // 1..7
            gfx.lineColor(color(rand(256),rand(256),rand(256)));
            gfx.line(x1,y1,x2,y2);
          }
        }
        var newImage = new Image(500,500,painter);
        // bind image with the URL:
        self.bindImage("in-memory:test", newImage);
        if( dynImage ) dynImage.destroy();
        dynImage = newImage;
        // testing second mode of bindImage(url)
        assert self.bindImage("in-memory:test") instanceof Image;
        
      }      
      
      generate();
      
      event click $(button#test)
      {
        generate();
      }
      
      event click $(button#save-png)
      {
        var bytes = dynImage.toBytes();
        var filter = "PNG Files (*.png)|*.png|All Files (*.*)|*.*";
        var ext = "png";
        var path = view.selectFile(#save, filter, ext);
        if( path )
           bytes.save(path);
      }
      event click $(button#save-jpg)
      {
        var bytes = dynImage.toBytes(85); // 85% quality level
        var filter = "JPEG Files (*.jpg)|*.jpg|All Files (*.*)|*.*";
        var ext = "jpg";
        var path = view.selectFile(#save, filter, ext);
        if( path )
           bytes.save(path);
      }


      event click $(button#to-clipboard)
      {
        view.clipboard(#put, dynImage);
      }
      
      event click $(button#from-clipboard)
      {
        var img = view.clipboard(#get, #picture);
        if( img )
          self.bindImage("in-memory:test", img);
      }
      
    </script>
  </head>
<body>
  <button #test>ReGenerate</button>
  <button #save-png>Save as PNG image to file</button>
  <button #save-jpg>Save as JPEG image to file</button>
  <button #to-clipboard>Save image to clipboard</button>
  <button #from-clipboard>Load image from clipboard</button>
  <div.test></div>
</body>
</html>
